<!DOCTYPE HTML>
<html>

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/jquery.inputfocus-0.9.min.js"></script>
    <script type="text/javascript" src="js/jquery.main.js"></script>
	<link rel="Shortcut Icon" type="image/ico" href="images/Pacman-icon.png" />
    

  <title>PacMan Game</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  
  
    <link href="css/rangeStyle.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/loginStyle.css" type="text/css" />
    <link rel="stylesheet" href="css/registerStyle.css" type="text/css" />
    <link rel="stylesheet" href="css/screen.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/style_pacNew.css" />
	<link rel="stylesheet" type="text/css" href="css/css_about.css" />
	
	<link rel="stylesheet" type="text/css" href="css/dialog_box.css" />
	<script type="text/javascript" src="js/dialog_box.js"></script>


    <style>
    @font-face{
    font-family: Ariel;
    src: url(fonts/PAC-FONT.TTF);}
    </style>
</head>

<body id="java">
  <div id="main">
    <div id="header">
      <div id="logo">
            <style type="text/css">
			#fleft
			{
			float:left;
			}
			</style>
          <img id="fleft" src="images/Pacman-icon.png" height="100">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->

<img src="images/Pac-Man_Logo_1.bmp", id="paclogo" height="61">
            <h3 id="credit" style="font-family: Berlin Sans FB Demi;">by Yehiel Dahan and Ravit Avraham</h3>
            
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li><a id="welcome_li" style="font-family: Berlin Sans FB Demi;" onclick="ShowSection('welcome')">Welcome</a></li>
          <li><a id="register_li" style="font-family: Berlin Sans FB Demi;" onclick="ShowSection('register')">Register</a></li>
          <li><a id="login_li" style="font-family: Berlin Sans FB Demi;" onclick="ShowSection('login')">Login</a></li>
          <li><a id="about_li" style="font-family: Berlin Sans FB Demi;" href="#openModal" >About</a></li>
          <li><a id="contact_li" style="font-family: Berlin Sans FB Demi;" onclick="ShowSection('contact')">Contact Us</a></li>
        </ul>
      </div>
    </div>
      <div id="site_content">
    <div id="welcome" style="visibility: visible;">
                <center><h1>Welcome to our PacMan game website</h1></center>
         <center><img src="images/pac1.png", height="250" width="500"></center>
                   <center> <input id="round" type="submit" value="Register" onclick="ShowSection('register')"/>
                            <input id="round" type="submit" value="Login" onclick="ShowSection('login')"/></center>
        </div>
        <div id="contact">
            <div id="ContactContainer">
				
						
		
		<form id="form3" action="/" method="post">	
		
			<h3><span>Contact Us</span></h3>
		
			<fieldset><legend>Contact form</legend>
				<p class="first">
					<label for="name">Name</label>
					<input type="text" name="name" id="name" size="30" />
				</p>
				<p>
					<label for="email">Email</label>
					<input type="text" name="email" id="email" size="30" />
				</p>
				<p>
					<label for="web">Website</label>
					<input type="text" name="web" id="web" size="30" />
				</p>
			</fieldset>
			<fieldset class="last">																					
				<p>
					<label for="message">Message</label>
					<br>
					<textarea name="message" id="message" cols="30" rows="10"></textarea>
				</p>					
							
			</fieldset>					
			
			<!--<p class="submit"><button href="MAILTO:yehieldn@gmail.com;" type="submit">Send</button></p>		-->
			<a href="mailto:yehieldn@gmail.com"><img style="position:absolute; margin:280px 300px 300px -450px;" src="images/form3/form_button.gif" alt="Click to email me" /></a>			
						
		</form>		
                </div>
          </div>
          		<div id="login">
                    <div id="wrapper">
                    
                        <form name="login-form" class="login-form" action="" method="post">
                        
                            <div class="header">
                            <h1>Login</h1>
                            <span>Fill out the form below to login to my super awesome imaginary control panel.</span>
                            </div>
                        
                            <div class="content">
                            <input id="username_login" type="text" class="input username" placeholder="Username" />
                            <div class="user-icon"></div>
							<span style="color:red;font-weight:bold;"><p id = "username_loginError">x</p></span>
                            <input id="password_login" type="password" class="input password" placeholder="Password" />
                            <div class="pass-icon"></div>		
							<span style="color:red;font-weight:bold;"><p id = "password_loginError">x</p></span>
                            </div>
                    
                            <div class="footer">
                            <input type="submit" name="submit" value="Login" class="button" onclick="checkLoginDetails()"/>
                            <input type="submit" name="submit" value="Register" class="register" onclick="ShowSection('register')" />
                            </div>
                        
                        </form>

                    </div>
                    <div class="gradient"></div>
			     </div>
          <div id="register">
              <div class="container">      
      <div  class="form">
    		<form id="contactform" onsubmit="registerValidation()" action="MAILTO:yehieldn@gmail.com" method="post" autocomplete="on"> 
    			<p class="contact"><label for="name">First Name</label></p> 
    			<input id="firstName" name="name" placeholder="First name" required="" tabindex="1" type="text"> 
                	<p class="contact"><label for="name">Last Name</label></p> 
    			<input id="lastName" name="name" placeholder="Last name" required="" tabindex="1" type="text"> 
    			 
    			<p class="contact"><label for="email">Email</label></p> 
    			<input id="email" name="email" placeholder="example@domain.com" required="" type="email"> 
                
                <p class="contact"><label for="username">Create a username</label></p> 
    			<input id="username" name="username" placeholder="username" required="" tabindex="2" type="text"> 
    			 
                <p class="contact"><label for="password">Create a password</label></p> 
    			<input type="password" id="password" name="password" required="" placeholder="********"> 
        
               <fieldset>
                 <label>Birthday</label>
                  <label class="month"> 
                  <select class="select-style" name="BirthMonth">
                  <option value="">Month</option>
                  <option  value="01">January</option>
                  <option value="02">February</option>
                  <option value="03" >March</option>
                  <option value="04">April</option>
                  <option value="05">May</option>
                  <option value="06">June</option>
                  <option value="07">July</option>
                  <option value="08">August</option>
                  <option value="09">September</option>
                  <option value="10">October</option>
                  <option value="11">November</option>
                  <option value="12" >December</option>
                  </label>
                 </select>  
					<label class="day"> 
                  <select class="select-style" name="BirthDay">
				  <option value="">Day</option>
				  <option value="">1</option><option value="01">2</option><option value="02">3</option><option value="03" >4</option><option value="04">5</option><option value="05">6</option><option value="06">7</option>
                  <option value="07">8</option><option value="08">9</option><option value="09">10</option><option value="10">11</option><option value="11">12</option>
                  <option value="12" >13</option><option value="12" >14</option><option value="12" >15</option><option value="12" >16</option><option value="12" >17</option>
				  <option value="12" >18</option><option value="12" >19</option><option value="12" >20</option><option value="12" >21</option><option value="12" >22</option>
				  <option value="12" >23</option><option value="12" >24</option><option value="12" >25</option><option value="12" >26</option>
				  <option value="12" >27</option><option value="12" >28</option><option value="12" >29</option><option value="12" >30</option><option value="12" >31</option>
                  </label>
                 </select> 		
				 <label class="year"> 
                  <select class="select-style" name="BirthYear">
				  <option value="">Year</option>
				  <option value="">2014</option><option value="01">2013</option><option value="02">2012</option><option value="03" >2011</option><option value="04">2010</option><option value="05">2009</option>
                  <option value="07">2008</option><option value="08">2007</option><option value="09">2006</option><option value="10">2005</option><option value="11">2004</option>
                  <option value="12" >2003</option><option value="12" >2002</option><option value="12" >2001</option><option value="12" >2000</option><option value="12" >1999</option>
				  <option value="12" >1998</option><option value="12" >1997</option><option value="12" >1996</option><option value="12" >1995</option><option value="12" >1994</option>
				  <option value="12" >1993</option><option value="12" >1992</option><option value="12" >1991</option><option value="12" >1990</option>
				  <option value="12" >1989</option><option value="12" >1988</option><option value="12" >1987</option><option value="12" >1986</option><option value="12" >1985</option>
                  </label>
                 </select> 	

              </fieldset>
  
            <select class="select-style gender" name="gender">
            <option value="select">i am..</option>
            <option value="m">Male</option>
            <option value="f">Female</option>
            <option value="others">Other</option>
            </select><br><br>
            
            <p class="contact"><label for="phone">Mobile phone</label></p> 
            <input id="phone" name="phone" placeholder="phone number" required="" type="text"> <br>
            <input class="buttom" name="submit" id="submit" tabindex="5" value="Sign me up!" type="submit"> 	 
   </form> 
</div> 
                            <img src="images/pac2.png" height="400" style="position:absolute; left:850px; top:250px">
</div>
          </div>
		  
          <div id="openModal" class="modalDialog">
			<link rel="stylesheet" type="text/css" href="css_about.css" /><!--about -->
			<div>
				<a href="#close" title="Close" class="close">X</a>
				<br></br>
				<center><img src="images/pac1.png" width="250" height="120" align="center"></center>
				<br></br>
				<p><font size="3"> This game was built without using an existing template and Based on the elements of HTML5, jQuery and JavaScript.</p>
				Example of jQuery Plugin:
				<li>Validation- Verified input fields when user registry.</li>
				<p>The main difficulties in this exercis were The dealing with a new language and creating a combination of html, css and jQuery.
				</font></p>
				<br></br>
				<p><b><center><font size="5">© Developed by Yehiel Dahan & Ravit Avraham 2014</font></center></b></p>
				<a></a>
			</div>
		</div>
		
          <div id="gamesettings">
              <br><center><h1 style="font-family:pac; color:#cc0000;">game settings</h1></center>
                    <br><br>
					<center><h1 style="font-family: Berlin Sans FB Demi; text-shadow: 2px 2px #000000;"> Player Name: Test</h1></center>
					<br><br>
					<div id=timeSlide>
						<h4 style="position:relative;right:-30px; font-family:pac;">Time in seconds </h4> 
						60<input type="range" min="60" max="250" value="150" onchange="rangevalue.value=value; update_time(value)"/>250
						<output id="rangevalue"></output>
					</div>
					
					<div id=monstersSlide style="position:relative;right:-360px; top:-35px; ">
						<h4 style="position:relative;right:-60px; font-family:pac;">Monsters</h4> 
						01<input type="range" min="1" max="3" value="1" onchange="rangevalue1.value=value; updateNumOfMonsters(value)" />3
						<output id="rangevalue1"></output>
					</div>
					
					<div id=foodSlide style="position:relative;right:-640px;top:-70px;">
						<h4 style="position:relative;right:-25px; font-family:pac;">Number of food</h4> 
						50<input type="range" min="50" max="99" value="50" step="1" onchange="rangevalue2.value=value; setAmountOfFood(value)"/>99
						<output id="rangevalue2"></output>
					</div>
					<center><h2 style="font-family:pac;">Points</h2>
					<br><br><div id="foodColor">
					<h4 style="display:inline;">20 Points</h4>
					<input id="highScore_color" type="color" value="#F50905" />
					<h4 style="display:inline;margin-left:250px;">10 Points</h4>
					<input id="mediumScore_color" type="color" value="#228B22"/> 
					<h4 style="display:inline;margin-left:250px">5 Points</h4>
					<input id="lowScore_color" type="color" value="#000000"/>
				</div>
				<br>
					<br><center><h2 style="font-family:pac;">Colors</h2>
					<br><br><div id="foodColor">
					<h4 style="display:inline;">Body</h4>
					<input id="body_color" type="color" value="#FFFF00" />
					<h4 style="display:inline;margin-left:250px;">Eyes</h4>
					<input id="eyes_color" type="color" value="#000000"/> 
				</div>
				<br><br><center> <input id="round2"  type="button" value="Play" onclick="ShowSection('game')"/></center>
				<<!--<input id="round"  type="submit" value="Play" onclick="ShowSection('game')"/>-->
          </div>
		  
		 <center> <div id="game">

				<table>
							<td><span><input id="gobutton" type="submit" value="Back!" onclick="ShowSection('gamesettings'); back()"/></span></td>
							<td><span><h2 style="font-family: Berlin Sans FB Demi; text-shadow: 2px 2px #000000;"> Player Name: Test </h2></span></td>
							<td><span><input id="gobutton" type="submit" value="Restart!" onclick="restart();" /></span></td>
				</table>
				
				<table>
				<tr>
				<td><span>SCORE: </span></td>
				<td><input id="lblScore" type="text" style="width:70px"/></td>
				<td><span>TIME: </span></td>
				<td><input id="lblTime" type="text" style="width:70px"/></td>
				<div id="lives_container">
						<td><span>Lives: </span></td>
						<td>
						<span><img src="images\live.png" height="30" id="pac1" class="lives"/></span>
						<span><img src="images\live.png" height="30" id="pac2" class="lives"></img></span>
						<span><img src="images\live.png" height="30" id="pac3" class="lives"></img></span>
						</td>
				</div>
				</table>

				 
					<div id="myCanvas" >
						<canvas id="canvas" height="400" width="400" style="background:url(images/back.jpg);" ></canvas>
					</div>
					<img style="visibility:hidden; display:none;" id="monster1" src="images\Ghost1.png"/>
					<img style="visibility:hidden; display:none;" id="monster2" src="images\Ghost2.png"/>
					<img style="visibility:hidden; display:none;" id="monster3" src="images\Ghost3.png"/>
	      </div>
		  </center>
        
      <div id="content">
      </div>
    </div>
    <div id="footer">
         <br><h1 style="font-family: Berlin Sans FB Demi;">In this website we used HTML 5 elements, JQery and JavaScript!</h1>
    </div>
    <p>&nbsp;</p>
  </div>
    <script type="text/javascript" src="js/script_Pac_new.js"></script>
</body>
</html>
